<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="/AnxioTeamSpringMVC/script/test.js"></script>
<script type="text/javascript" src="/AnxioTeamSpringMVC/script/jscharts.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script type="text/javascript" src="http://jquery.com/src/jquery.js"></script>
<script type="text/javascript" src="http://jquery.com/src/jquery.js"></script>
<script type="text/javascript" src="/AnxioTeamSpringMVC/script/jquery.js"></script>

<script type="text/javascript">
var viewData = new ViewData();

function ViewData(){
	this.v1 = new ViewGroup("view1",1);
	this.v1.itemNames.push("1");
	this.v1.itemNames.push("2");
	this.v1.itemNames.push("3");
	this.v1.itemNames.push("4");

	this.v2 = new ViewGroup("view2",2);
	this.v2.itemNames.push("5");
	this.v2.itemNames.push("6");

	this.viewGroups = new Array();
	this.viewGroups.push(this.v1);
	
	this.viewGroups.push(this.v2);	
}


//mailFunction
function drawViewGroups(viewData,container){
	for(var i = 0;i < viewData.viewGroups.length;++i){
		//debugger;
		drawViewGroup(viewData.viewGroups[i],container);
	}
}

function drawViewGroup(viewGroup,container){
	
	var divViewGroup = $("<div/>").attr("id",viewGroup.Id).css("width",600).css("heigth",600).css("overflow","hidden");
	container.append(divViewGroup);
	//debugger;
	for(var i = 0;i < viewGroup.itemNames.length;++i){
		createDiv(divViewGroup,viewGroup.itemNames[i]);		
	}
	
	//container.append(divViewGroup);
} 

function createDiv(divViewGroup,itemName){
	//var itemDiv = $("<div/>").attr("id",itemName);
	
	var c = (s % 2 == 0) ? "test1":"test2";
	s = s + 1;
	var itemDiv = $("<div/>").attr("id","div" + itemName).attr("class",c);

	var chartDiv = $("<div/>").attr("id","char"+itemName).css("float","left");
	


	// add dropDownList
	var selection = addDropDownList(itemName);
	var selectionDiv = $("<div/>").attr("id","selection" + itemName).css("width","100");
	selectionDiv.append(selection);


	var checkBoxDiv = $("<div/>").attr("id","ckBx" + itemName);
	var hiddenBox = createHiddenCheckBox(itemDiv,itemName);
	checkBoxDiv.append(hiddenBox);
	//itemDiv.text(itemName);
	itemDiv.append(checkBoxDiv);
	itemDiv.append(selectionDiv);
	itemDiv.append(chartDiv);
	
	divViewGroup.append(itemDiv);
	drawChart(1,"char"+itemName);
}

function createHiddenCheckBox(container,itemName)
{
	var inputStr = $("<input/>").attr("type","checkbox").attr("id","cbx" + itemName).attr("value","wokao").css("width",30).css("float","right").css("margin","0px 0px 20px 20px");
	inputStr.click(function(){
		var s = this.id;
	
		var cbx = $("#cbx" + itemName);
		var divId = "char" + s.substr(3);
		if(!cbx.is(':checked')){	
			$("#" + divId).hide(2000);
		}
		else{
			$("#" + divId).show(2000);	
		}

	});
	return inputStr;
}

function hide(id){
	$("#" + id).hide(3000);
}

function ViewGroup(name,id){
	this.Name = name;
	this.Id = id;
	this.itemNames = new Array();
}

function itemViewInfo(itemId,vgId){
	this.itemId = itemId;
	this.viewGroupId = vgId;
}

var viewItemInfos = new Array();
function loadViewsData(){
    var trs =  $("#viewGroupstb tr");
    

    $(trs).each(function(index) {
	//debugger;
   	var i = 0;
       var tds = $(this).find("td");
	var itemId;
	var viewGroupId;
	
    	$(tds).each(function(index){

              		switch(i){
       		case 0:
       			itemId = $(this).text();
       			break;
       		case 1:
       			viewGroupId = $(this).text();
       			break;
       		}

       		++i;
       		
       	});
		var info = new itemViewInfo(itemId,viewGroupId);
		viewItemInfos.push(info);
       });	
	
       
}

function addItems(item,mainContainer){
    if(item.subItems.length  == 0) return;
    var containerNode;
    if ($("#" + item.id + "container").length == 0){
	containerNode = $("<div/>").attr("id",item.id + "_container");
	mainContainer.append(containerNode);	
    }
    
    for(var i = 0; i < item.subItems.length; ++ i){
	var subIdStr = item.subItems[i].id;
	var div = $("<div/>").attr("id", subIdStr).attr("class","node_content");
	createItems(item.subItems[i],div);
	containerNode.append(div);
    }     
}

function loadItemsData(){
    var trs =  $("#itemstb tr");
    
    $(trs).each(function(index) {
	
   	var i = 0;
       var tds = $(this).find("td");
	var id;
	var parentId;
	var title;
	var level;
    	$(tds).each(function(index){
              		switch(i){
       		case 0:
       			id = $(this).text();
       			break;
       		case 1:
       			parentId = $(this).text();
       			break;
       		case 2:
       			title = $(this).text();
       			break;
       		case 3:
       			level = $(this).text();
       			break;
       		}

       		++i;
       		
       	});
		var item = new itemEntity(title,id,parentId,level);
		itemLists.push(item);
       });	
}

function loadViewItems(){
	
	var viewGroups = new Array();
	var groupIdAdded = new Array();
	
	for(var i = 0;i < viewItemInfos.length;++i){
		var viewItem = viewItemInfos[i];
		if(groupIdAdded.indexOf(viewItem.viewGroupId) < 0){
			groupIdAdded.push(viewItem.viewGroupId);
			viewGroup = new  ViewGroup("name",viewItem.viewGroupId);
			viewGroup.itemNames.push(viewItem.itemId);
			viewGroups.push(viewGroup);
		}
		else{
			for(var k = 0;k < viewGroups.length;++k){
				var viewGroup = viewGroups[k];
				if(viewGroup.Id == viewItem.viewGroupId){
			
					viewGroup.itemNames.push(viewItem.itemId);
					break;
				}
			}
		}
		
	}
	
	viewData.viewGroups = viewGroups;
}

function show(){
	//alert("Welcome!");
}

var itemLists = new Array();
function prepare(){
	if(!Array.prototype.indexOf) {
    		Array.prototype.indexOf = function(needle) {
        		for(var i = 0; i < this.length; i++) {
            			if(this[i] === needle) {
               	 		return i;
            			}
        		}
        	return -1;
    		};
	}

	String.format = function(src){
    		if (arguments.length == 0) return null;
    		var args = Array.prototype.slice.call(arguments, 1);
    		return src.replace(/\{(\d+)\}/g, function(m, i){
        	return args[i];
    		});
	};

	String.prototype.startWith=function(str){     
		var reg=new RegExp("^"+str);     
		return reg.test(this);        
	}     


}

function itemEntity(title,id,parentId,level){
	this.title = title;
	this.id = id;
	this.parentId = parentId ;
	this.subItems = new Array();
	this.level = level;
}

function Data(){
this.item1 = new itemEntity("1",1,0,1);
this.item2 = new itemEntity("2",2,3,3);
this.item3 = new itemEntity("3",3,1,2);
this.item4 = new itemEntity("4",4,0,1);
this.item5 = new itemEntity("5",5,3,3);
this.item6 = new itemEntity("6",6,5,4);
this.itemList = new Array();

this.itemList.push(this.item1);
this.itemList.push(this.item2);
this.itemList.push(this.item3);
this.itemList.push(this.item4);
this.itemList.push(this.item5);
this.itemList.push(this.item6);
//itemList = this.itemList;
}

function getSubItems(parentItem,itemList,itemAdded){
	var s1 = itemList[0];
	var s2 = itemList[1];

	if(itemAdded.indexOf(parentItem.id) > 0)
			return;
	for(var i = 0;i < itemList.length;++i){
		if(itemList[i].parentId == parentItem.id){
			parentItem.subItems.push(itemList[i]);
			getSubItems(itemList[i],itemList,itemAdded);
		}	
	}
	itemAdded.push(parentItem.id);
}

function retriveDataFromHtml(){
	var itemsTable = $("#itemstb");
	var trs = $("#itemstb tr");
	
}

function formatItemList(itemList){
	
	//debugger;
	var formattedList = new Array();
	var itemAdded = new Array();
	
	for(var i = 0;i < itemList.length;++i){
		getSubItems(itemList[i],itemList,itemAdded);
		if(itemList[i].parentId == 0){
			formattedList.push(itemList[i]);
		}
	}

	
	return formattedList;
}



function createTree(data,containerId){
	prepare();
	
	//var data = new Data();
	var list = formatItemList(itemLists);
	var menuDiv = $("#" + containerId);
	for(var i = 0; i < list.length;++i){
		var container = createMainContainer(list[i],menuDiv);
		createItems(list[i],container);	
	}
}

function createMainContainer(item,container){
	var div = $("<div/>").attr("id",item.id);
	var inputStr = String.format('<input type="hidden" id="' + item.id + "_status" + '" name="{0}" value="1" />',"node_"+item.id+"_ status");
	var input = $(inputStr);
	div.append(input);
	//$("#myMenu").append(div);
	container.append(div);
	return div;
}

function createItems(item,mainContainer){
	getTitleSpan(item,mainContainer);
        getTitleArrow(item,mainContainer);
        addItems(item,mainContainer);
}

function createCheckBox(item){
	var html = '<input type="checkbox" id="cb' + item.id +'" value="'+ item.title +'" /> <label for="cb'+item.id+'">'+ item.title +'</label>';
	return html;
}

// title means first level title
function getTitleArrow(item,mainContainer){
	var s = '<a href="#" class="link_text"><span class="node_title" id="{0}">&#9660;</span></a>';
	s = String.format(s, item.id+ "_arrow");
	var a = $(s);
	a.click(function (){ hide_menu(item.id);});
	mainContainer.prepend(a);
}

function getTitleSpan(item,mainContainer){
	var titleStr;
	var title;
	if(item.level != 3){
		titleStr = String.format('<span class="node_title" id="{1}">{0}</span>',item.title,item.id + "_title");
		title = $(titleStr);
	}
	else{
		titleStr = String.format('<span class="node_title" id="{1}">{0}</span>', createCheckBox(item),item.id + "_title");
		title = $(titleStr);
		
	}
	mainContainer.prepend(title);
}

function hide_menu(node_id){
	var node = document.getElementById(node_id + "_container");
	
	var node_status = document.getElementById(node_id + "_title");

	var node_text=document.getElementById(node_id+"_arrow");
	if(node_status.value=="1" && node != null){
		node.style.display = "none"; 
	}
	else if(node != null){
		
		node.style.display = ""; 
	}

	if(node_status.value=="1" && node != null){
		node_status.value="0";
		node_text.innerHTML="&#9658";
	}
	else{
		node_status.value="1";
		node_text.innerHTML="&#9660";
	}

	return false;

	}


function addItems(item,mainContainer){
     if(item.subItems.length  == 0) return;
     var containerNode;
     if ($("#" + item.id + "container").length == 0){
	containerNode = $("<div/>").attr("id",item.id + "_container");
	mainContainer.append(containerNode);	
     }
     
     for(var i = 0; i < item.subItems.length; ++ i){
	var subIdStr = item.subItems[i].id;
	var div = $("<div/>").attr("id", subIdStr).attr("class","node_content");
	createItems(item.subItems[i],div);
	containerNode.append(div);
     }     
}


function viewgroupobj(itemid,viewgroupid){
	this.itemid = itemid;
	this.viewgroupid = viewgroupid;
}


var viewitem; 
var n;
var arr;	
var arr1;
var arr2;
var res;

function checkedcount(){

	
	viewitem=new Array(); 
	n=new Array();
	arr =new Array();	
	arr1 = new Array();
	arr2 = new Array();
	res = new Array();
	var k=0;

	
	
	n= $("#treeViewDiv input:checked");
	
	
	$("#treeViewDiv input:checked").each(function() {
		arr.push($(this).attr('id'));
	
	});

	
	
	
	for (var i=0;i<arr.length;i++){
		

		for (var j=0;j<viewItemInfos.length;j++){
			
			if(arr[i]==viewItemInfos[j].itemId){
	
				res [k]=viewItemInfos[j].viewGroupId;
				k++;
				
			}
		}
	    		
	}

		
	
	alert("Number of items selected:"+ arr.length);
	
	for (var i=0;i<arr.length;i++){
	
		alert("ItemId:"+ arr[i]);
		alert("GroupId:"+ res [i]);
		
	}
	
	
	var info = new itemViewInfo(arr,res);
	viewitem.push(info);
		
	
}

function loadItemsData(){
    var trs =  $("#itemstb tr");
    
    $(trs).each(function(index) {
	
   	var i = 0;
       var tds = $(this).find("td");
	var id;
	var parentId;
	var title;
	var level;
    	$(tds).each(function(index){

              		switch(i){
       		case 0:
       			id = $(this).text();
       			break;
       		case 1:
       			parentId = $(this).text();
       			break;
       		case 2:
       			title = $(this).text();
       			break;
       		case 3:
       			level = $(this).text();
       			break;
       		}

       		++i;
       		
       	});
		var item = new itemEntity(title,id,parentId,level);
		itemLists.push(item);
       });	
}


var s = 0;
function addDropDownList(itemId,container){
	var s = $("<select/>");
	s.attr("id","selection" + itemId);
	s.css("width",50);
	s.change(function(){
			var sObj = $(this);	
			var selectId = sObj.attr("id");
			
			var selectVal = $("#" + selectId + " " + "option:selected").attr("value");
		
			switch(selectVal){
				case "0":
					var id = "char" + selectId.substring(9);
					//alert(id);
					drawChart(selectVal,id,container);
					
					//alert("1");
					break;
				case "1":
					//alert("2");
					break;
				default:
					alert("d not support this type");
			}
			//alert(selectText);
		}
	);	
	var op1 = "<option value='0'>pie</option>";
	var op2 = "<option value='1'>bar</option>";

	s.append(op2);
	s.append(op1);
	return s;
}



function drawChart(chartypeId,divId,container,data){
	
	var s = $("#" + divId).length > 0;
	if(!s){
		
		var chartDic = String.format("<div id='{0}'/>",divId);
		container.append($(chartDic));
	}
	var myData;
	if(data == null){
		
		myData = new Array(['unit', 20], ['unit two', 10], ['unit three', 30], ['other unit', 10], ['last unit', 30]);
	}
	else{
		myData = data;
	}
	

	if(chartypeId == 1){
		//var myData = new Array(['Asia', 437, 520], ['Europe', 322, 390], ['North America', 233, 286], ['Latin America', 110, 162], ['Africa', 34, 49], ['Middle East', 20, 31], ['Aus/Oceania', 19, 22]);
		//var myData = new Array(['Asia', 437], ['Europe', 322], ['North America', 233], ['Latin America', 110], ['Africa', 34], ['Middle East', 20], ['Aus/Oceania', 19]);
		var myChart = new JSChart(divId, 'bar');
		myChart.setDataArray(myData);
		myChart.setTitle('title');
		myChart.setTitleColor('#8E8E8E');
		myChart.setAxisNameX('');
		myChart.setAxisNameY('');
		myChart.setAxisNameFontSize(16);
		myChart.setAxisNameColor('#999');
		myChart.setAxisValuesAngle(30);
		myChart.setAxisValuesColor('#777');
		myChart.setAxisColor('#B5B5B5');
		myChart.setAxisWidth(1);
		myChart.setBarValuesColor('#2F6D99');
		myChart.setAxisPaddingTop(60);
		myChart.setAxisPaddingBottom(60);
		myChart.setAxisPaddingLeft(45);
		myChart.setTitleFontSize(11);
		myChart.setBarColor('#2D6B96', 1);
		//myChart.setBarColor('#9CCEF0', 2);
		myChart.setBarBorderWidth(0);
		myChart.setBarSpacingRatio(50);
		myChart.setBarOpacity(0.9);
		myChart.setFlagRadius(6);
		//myChart.setTooltip(['North America', 'Click me', 1], callback);
		myChart.setTooltipPosition('nw');
		myChart.setTooltipOffset(3);
		myChart.setLegendShow(true);
		myChart.setLegendPosition('right top');
		//myChart.setLegendForBar(1, '2005');
		//myChart.setLegendForBar(2, '2010');
		myChart.setSize(300,300);
		myChart.setGridColor('#C6C6C6');
		myChart.draw();
	}
	else if(chartypeId == 0){
		var myChart = new JSChart(divId, 'pie');
		myChart.setDataArray(myData);
		myChart.setSize(300,300);
		myChart.draw();
	}
}



function redrawInfo(){
	this.data = new Array();
	this.names = new Array();
}


function chartDataInfo(){
	this.name = "1";
	this.data = new Array();
}

var d1 = new chartDataInfo();
d1.name = "d1";
d1.data.push(1);
d1.data.push(2);
d1.data.push(3);
d1.data.push(4);
d1.data.push(5);

var d2 = new chartDataInfo();
d2.name = "d2";
d2.data.push(6);
d2.data.push(7);
d2.data.push(8);
d2.data.push(9);
d2.data.push(10);

var d3 = new chartDataInfo();
d3.name = "d3";
d3.data.push(11);
d3.data.push(12);
d3.data.push(13);
d3.data.push(14);
d3.data.push(15);

var dataArray = new Array();
dataArray.push(d1);
dataArray.push(d2);
dataArray.push(d3);

function redraw(viewGroupId){
	//debugger;
	var result = new Array();
	var redrawInfos = new Array();
	var names = new Array();
	names.push("2000");
	names.push("3000");
	names.push("4000");
	names.push("5000");
	names.push("6000");

	var checkedIndexs = new Array();
	var viewGrpDivId = "viewGroupDiv" + viewGroupId;
	var viewGrp = $(viewGrpDivId); // get view group div id 
	var ctrlPnlId = "ctrPnl" + viewGroupId;
	var ctrlPnl = $("#" + ctrlPnlId);
	var chBoxs = ctrlPnl.find("input");
	

	for(var i = 0;i < chBoxs.length;++i){ 
		checkedIndexs.push(0); // 1 means unchecked;
	} 

	chBoxs.each(function(index){
		if($(this).is(':checked')){
			checkedIndexs[index] = 1;
		}
	});
        debugger;
	for(var k = 0;k < names.length;++k){
		var arra = new Array();
		arra.push(names[k]);
					
		for(var j = 0; j < dataArray.length;j++){
			if(checkedIndexs[j] == 1){
				//for(var l = 0;l < dataArray[j].data.length;++l){
					
				var val = dataArray[j].data[k];
				arra.push(val);//}
				//}
			}
			
		}
		result.push(arra);
		
	}
	// debugger;
	var vDiv = $("#viewGroupDiv" + viewGroupId);
	var divs = vDiv.find("div");
	//var divs = $("#" + "veiwGroupDiv" + viewGroupId + " div");
	divs.each(function(index){
		var name = $(this).attr("id");
		if($(this).attr("id").startWith("char")){
			drawChart(1,$(this).attr("id"),null,result);
		}
	});
}

function createDiv(divViewGroup,itemName){
	
	var c = (s % 2 == 0) ? "test1":"test2";
	s = s + 1;
	var itemDiv = $("<div/>").attr("id","div" + itemName).attr("class",c).css("margin-left",30);

	var chartDiv = $("<div/>").attr("id","char"+itemName).css("float","left");
	var checkBoxDiv = $("<div/>").attr("id","ckBx" + itemName);
	var hiddenBox = createHiddenCheckBox(itemDiv,itemName);
	checkBoxDiv.append(hiddenBox);

	// add dropDownList
	var selection = addDropDownList(itemName);
	var selectionDiv = $("<div/>").attr("id","selection" + itemName);
	selectionDiv.append(selection);

	//itemDiv.text(itemName);
	itemDiv.append(checkBoxDiv);
	itemDiv.append(selectionDiv);
	itemDiv.append(chartDiv);
	itemDiv.css("padding-left",30);
	itemDiv.css("magrin-left",80);
	divViewGroup.append(itemDiv);
	
	drawChart(1,"char"+itemName);
}function createDiv(divViewGroup,itemName){
	
	var c = (s % 2 == 0) ? "test1":"test2";
	s = s + 1;
	var itemDiv = $("<div/>").attr("id","div" + itemName).attr("class",c).css("margin-left",30);

	var chartDiv = $("<div/>").attr("id","char"+itemName).css("float","left");
	var checkBoxDiv = $("<div/>").attr("id","ckBx" + itemName);
	var hiddenBox = createHiddenCheckBox(itemDiv,itemName);
	checkBoxDiv.append(hiddenBox);

	// add dropDownList
	var selection = addDropDownList(itemName);
	var selectionDiv = $("<div/>").attr("id","selection" + itemName);
	selectionDiv.append(selection);

	//itemDiv.text(itemName);
	itemDiv.append(checkBoxDiv);
	itemDiv.append(selectionDiv);
	itemDiv.append(chartDiv);
	itemDiv.css("padding-left",30);
	itemDiv.css("magrin-left",80);
	divViewGroup.append(itemDiv);
	
	drawChart(1,"char"+itemName);
}

function createDiv(divViewGroup,itemName){
	
	var c = (s % 2 == 0) ? "test1":"test2";
	s = s + 1;
	var itemDiv = $("<div/>").attr("id","div" + itemName).attr("class",c).css("margin-left",30);

	var chartDiv = $("<div/>").attr("id","char"+itemName).css("float","left");
	var checkBoxDiv = $("<div/>").attr("id","ckBx" + itemName);
	var hiddenBox = createHiddenCheckBox(itemDiv,itemName);
	checkBoxDiv.append(hiddenBox);

	// add dropDownList
	var selection = addDropDownList(itemName);
	var selectionDiv = $("<div/>").attr("id","selection" + itemName);
	selectionDiv.append(selection);

	//itemDiv.text(itemName);
	itemDiv.append(checkBoxDiv);
	itemDiv.append(selectionDiv);
	itemDiv.append(chartDiv);
	itemDiv.css("padding-left",30);
	itemDiv.css("magrin-left",80);
	divViewGroup.append(itemDiv);
	
	drawChart(1,"char"+itemName);
}

var viewData = new ViewData();

function ViewData(){
	this.v1 = new ViewGroup("view1",1);
	this.v1.itemNames.push("1");
	this.v1.itemNames.push("2");
	this.v1.itemNames.push("3");
	this.v1.itemNames.push("4");

	this.v2 = new ViewGroup("view2",2);
	this.v2.itemNames.push("5");
	this.v2.itemNames.push("6");

	this.viewGroups = new Array();
	this.viewGroups.push(this.v1);
	
	this.viewGroups.push(this.v2);	
}



//mailFunction
function drawViewGroups(viewData,container){
	for(var i = 0;i < viewData.viewGroups.length;++i){
		
		drawViewGroup(viewData.viewGroups[i],container);
	}
}

function drawViewGroup(viewGroup,container){
	var divViewGroup = $("<div/>").attr("id","viewGroupDiv" + viewGroup.Id).css("width",800).css("heigth",600).css("overflow","hidden");
	var ctrlPnl = controlPanel(attrList,viewGroup.Id);
	
	container.append(divViewGroup);
	divViewGroup.append(ctrlPnl);
	//debugger;
	for(var i = 0;i < viewGroup.itemNames.length;++i){
		createDiv(divViewGroup,viewGroup.itemNames[i]);		
	}
	
	container.append(divViewGroup);
}

function attrInfo(name,id){
	this.name = name;
	this.id = id;
}

var attrList = new Array();

function loadAttrInfo(){

	this.attrInfo1 = new attrInfo("1",1);
	this.attrInfo2 = new attrInfo("2",2);

	this.attrInfo3 = new attrInfo("3",3);

	attrList.push(this.attrInfo1);
	attrList.push(this.attrInfo2);
	attrList.push(this.attrInfo3);
}


function controlPanel(attrList,viewGroupId){
	var divViewGroup = attrList;
	var attrDiv = $("<div/>").attr("id","ctrPnl" + viewGroupId).css("float","left").css("height",400);

	for(var i = 0;i < attrList.length;++i){
		//debugger;
		var attrItem = attrList[i];
		var html = String.format('<input type="checkbox" id="{0}" value="{1}" />',"cbx"+attrItem.id,"22");
		var e = $(html);
		
		e.css("display","block");
		//var inputcbx = $("<input/>f</input>").attr("type","checkbox").attr("id","cbx" + attrItem.id).attr("value",attrItem.id).css("display","block");
		e.click(function(){
			//todo
			redraw(viewGroupId);
		});
		//inputcbx.text(attrItem.name);
		attrDiv.append(e);	
	}

	return attrDiv;
}

$(document).ready(function() {
	// a();
    prepare();
    loadItemsData();
    loadViewsData();
    loadViewItems();
	
    loadAttrInfo();

    $("#itemstb").hide();
    $("#viewGroupstb").hide();
	//debugger;
    createTree(itemLists,"treeViewDiv");
    var viewGroupsContainer = $("#ViewGroupsDiv");
    drawViewGroups(viewData ,viewGroupsContainer);
    });
</script>

<style type="text/css">
body{background:#161616; margin:0px;}
#topBanner{background-color: #222; font-size:40px; color:silver; padding:24px; font-weight:bolder; text-align:center }
/* Start styles for the menu elements */
#menu{background:#002; border:#1E1E1E 1px solid; padding:10px 0px 10px 0px;}
.style1 {
	font-size:20px; color:silver; 
	padding:10px 30px 10px 30px; 
	border:#1E1E1E 1px solid; 
	text-decoration:none;
}

.box1{
	//position:absolute;
	float:left;
	
	font-size:18px; color:silver;
	top:170px;
	width:200px;
	height:600px;
	padding:15px;
	border:#1E1E1E 1px solid; 
	color:white;
}

.box2{
	//position:absolute;
	
	font-size:18px; color:silver;
	top:170px;
	width:auto;
	padding:15px;
	border:#1E1E1E 1px solid; 
	color:white;
	float:left;
}


	.node_content{

	padding-left:30px; 

	}

	.node_title{

	vertical-align:top;

	}

	.link_text{

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-size:10px;
	font-color:white;

	text-decoration:none;

	}

	.link_text:hover{

	text-shadow:#FFCC00;

	font-weight:bold;

	}

	.node_title{

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-size:11px;

	font-weight:bold;

	text-decoration:none;

	}
.test1{
	float:left;
	background-color:#002;
	width:200;
	display:inline;

}

.test2{
	float:left;
	background-color:#002;
	width:200;
	display:inline;
	
}

.test4{
	width:500;
}

.test3{
	float:left;
	background-color:black;
	width:200;
}

.view{
	width:420;
}
.show_hide {
                position:relative;
                top:-25px;
	            left:800px;
}

.bar {
                position:relative;
                top:-16px;
        	    left:245px;
	            background:#003;
	            font-size:20px;
	            color:silver;
	            height:30px;
                width:671px;
}

.panel1 {
                position:relative;
                top:-25px;
     		    left:140px;
	            background: #003;
	            height: 400px;
                width:671px;
                display:none;
}

.dataselect {
                position:releative;
                top:50px;
                left:100px;
                width:120px;
                height:200px;
                background:#ffFF24;
}

.box2{
	background:#003;
	font-size:18px; color:silver;
	top:-16px;
	position:releative;
	left:250px;
	width:671px;
	height:400px;
	padding:15px;
	border:#1E1E1E 1px solid; 
	color:white;
}

</style>

<title>Axios Team</title>
</head>

<body>
<div id="topBanner">
Axios Team GUI
</div>
<div id="menu" class="menu1">
<a class="style1" href="#">Home</a><a class="style1" href="#">Axios</a><a class="style1" href="#">Data</a><a class="style1" href="#">Contact Us</a>
</div>
<br></br>

<div class="box1">
	<div id="treeViewDiv" >
	</div>
	<br></br>
	<input type="button" value="Submit" onclick="checkedcount();"/>

</div>

<div id="ViewGroupsDiv" class="box1">
	
</div>

<div class="box1">

<c:if test="${!empty menuitemcontroller}">
	<table id="itemstb">
	 

		<c:forEach items="${menuitemcontroller}" var="menuitem">
			<tr>
				<td><c:out value="${menuitem.id}"/></td>
				<td><c:out value="${menuitem.parentid}"/></td>
				<td><c:out value="${menuitem.title}"/></td>
				<td><c:out value="${menuitem.level}"/></td>
			</tr>
		</c:forEach>
	
	</table>
</c:if>

<br></br>

<c:if test="${!empty viewgroupcontroller}">
	<table id="viewGroupstb">
	 

		<c:forEach items="${viewgroupcontroller}" var="viewgroup">
			<tr>
				<td><c:out value="${viewgroup.menuitem_id}"/></td>
				<td><c:out value="${viewgroup.viewgroup_id}"/></td>
			</tr>
		</c:forEach>
	
	</table>
</c:if>
</div>


</body>
</html>